<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">

			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="商城推荐好物" />
				<button class="search-button">搜索</button>
			</view>

		</view>
		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">


			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">

					<view class="list" :class="{ action: selectedIndex === index }" v-for="(item,index) in classList"
						:key="index" @click="selectItem(index)">
						<text>{{item}}</text>
					</view>
				</scroll-view>

			</view>
			<view class="classify-two-three">
				<scroll-view scroll-y class="scroll">
					<view class="classify-two" v-for="(item,index) in 6" :key="index">

						<view class="classify-three">
							<view class="image">
								<image src="https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg"></image>
								<view class="list">
									<view class="title">
										白玉仙人
									</view>
									<view class="money">
										￥5600
									</view>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				height: 0,
				selectedIndex: null,
				classList: ['全部', '瓷器', '书画', '玉器', '玛瑙', '佛像', '珠宝', '茶叶', '农副产品']
			};
		},
		onReady() {
			setTimeout(() => {
				uni.hideTabBar()
			}, 100)
			let info = uni.createSelectorQuery().select(".page");
			info.boundingClientRect((data) => { //data - 各种参数
				console.log(data.height);
				this.height = data.height - 100;
				// #ifdef APP-PLUS 
				this.height = data.height - 130;
				// #endif 

			}).exec()
		},
		methods: {
			selectItem(index) {
				this.selectedIndex = index; // 更新选中的索引
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'class.scss'
</style>